<template>
    <a-form auto-label-width size="mini" layout="vertical">
        <a-form-item :label="customTranslate('ID')">
            <a-input v-model="id"></a-input>
        </a-form-item>
        <a-form-item :label="customTranslate('Name')">
            <a-input v-model="name"></a-input>
        </a-form-item>
        <a-form-item :label="customTranslate('Executable')">
            <a-checkbox v-model="isExecutable"></a-checkbox>
        </a-form-item>
    </a-form>
</template>

<script>
import { inject, toRaw } from "vue";
import customTranslate from "../../translate/customTranslate";

export default {
    name: 'process',
    props: ["element"],
    data() {
        return {
            id: "",
            name: "",
            isExecutable: true
        };
    },
    setup() {
        const bpmnModeler = inject("bpmnModeler");
        return {
            bpmnModeler,
            customTranslate
        };
    },
    mounted() {
        console.log(this.element);
        
        this.id = this.element?.businessObject?.id;
        this.name = this.element?.businessObject?.name;
        this.isExecutable = this.element?.businessObject?.isExecutable;
    },
    watch: {
        id: {
            immediate: false,
            handler:
            function(newVal) {
                const modeling = toRaw(this.bpmnModeler.get("modeling"));
                modeling.updateProperties(toRaw(this.element), {
                    id: newVal,
                });
            }
        },
        name: {
            immediate: false,
            handler:
            function(newVal) {
                const modeling = toRaw(this.bpmnModeler.get("modeling"));
                modeling.updateProperties(toRaw(this.element), {
                    name: newVal,
                });
            }
        },
        isExecutable: {
            immediate: false,
            handler:
            function(newVal) {
                const modeling = toRaw(this.bpmnModeler.get("modeling"));
                modeling.updateProperties(toRaw(this.element), {
                    isExecutable: newVal,
                });
            }
        },
    },
}
</script>

<style lang="scss" scoped>

</style>